<template>
   <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>小计</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in shopcartList" :key="item._id">
          <td>
            {{item._id }}
          </td>
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td>
            <button @click="item.num--">-</button>
            {{ item.num }}
            <button @click="item.num++">+</button>
          </td>
          <td>{{ (item.num*item.price).toFixed() }}</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="5">总价:{{ totalPrice }}</td>
        </tr>
      </tfoot>
    </table>
</template>
<!-- 
  组合式API的计算属性的语法
  import {computed} from 'vue'
  1、简写形式
  computed(()=>{})
 -->
<script lang='ts' setup>
  import {ref,computed} from 'vue'
  import axios from 'axios'

  interface ShopcartItemType{
    _id:string
    name:string
    num:number
    price:number
    checked?:boolean
  }
  //定义初始化数据
  let shopcartList=ref<Array<ShopcartItemType>>(
    []
  )
  //向后端发送请求
  axios.get('http://www.zhaijizhe.cn:3003/shopcart/getShopcartData').then(res=>{ 
    shopcartList.value=res.data.data
  })

  let totalPrice=computed(()=>shopcartList.value.reduce((pre,cur)=>pre+cur.price*cur.num,0))

</script>

<style lang='scss' scoped>
</style>